<template>
  <div class="container">
    <Waterfall :list="5" :dataList="list" />
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import Waterfall from '@/components/Waterfall.vue'
const list = ref([
  {
    url: 'https://picx.zhimg.com/v2-99d9a79c0c6244ffbbe20d063def2b07_r.jpg?source=2c26e567',
    info: ''
  },
  {
    url: 'https://pic2.zhimg.com/v2-a553896f5e13931087a18a76a5f0374e_r.jpg?source=1940ef5c?imageView2/2/w/640/q/85',
    info: ''
  },
  {
    url: 'https://picx.zhimg.com/v2-439897dd4a1c8e6d7a4a8b8d4df3bba5_r.jpg?source=2c26e567',
    info: ''
  },
  {
    url: 'https://pic1.zhimg.com/v2-b8a54af0c8cd5fc51db5e2894665d40c_r.jpg?source=1940ef5c',
    info: ''
  },
  {
    url: 'https://pic.netbian.com/uploads/allimg/250730/223956-17538863968e5b.jpg',
    info: ''
  },
  {
    url: 'https://pic2.zhimg.com/v2-a48b322f91756a96c91294b2caa02916_r.jpg?source=1940ef5c?imageView2/2/w/640/q/85',
    info: ''
  },
  {
    url: 'https://pic.netbian.com/uploads/allimg/250730/223956-17538863968e5b.jpg',
    info: ''
  },
  {
    url: 'https://pic.netbian.com/uploads/allimg/250730/223956-17538863968e5b.jpg',
    info: ''
  },
  {
    url: 'https://pic.netbian.com/uploads/allimg/250730/223956-17538863968e5b.jpg',
    info: ''
  },
  {
    url: 'https://pic.netbian.com/uploads/allimg/250730/223956-17538863968e5b.jpg',
    info: ''
  },
])
</script>

<style lang="scss">
.container {
  box-sizing: border-box;
  height: 100vh;
  background-color: #f5f5f5;
}
</style>